<template>
	<div class="view">
		<div class="logo">
			<img src="../assets/logo.png" alt="" width="50px;" height="50px;" style="margin-right: 10px;">
            智慧政协后台
		</div>
		<div class="menu-view">
			<Menu theme="dark" :active-name="activeName" width="auto" @on-select="changeMenu">
                <MenuItem :name="item.path" v-for="(item, index) in data" :key="index">
                    <img :src="item.url" height="14" width="16" alt="" style="vertical-align: inherit; margin-right: 5px;"> 
					{{item.title}}
                </MenuItem>
            </Menu>
		</div>
	</div>
</template>

<script>
export default {
	props: ['data'],
	data() {
		return {
			activeName: '',
			openNames: [],
		}
	},
	methods: {
		changeMenu(name) {
			this.$router.push({
				name: name
			})
		}
	}
}
</script>

<style scoped lang="less">
.view {
	width: 100%;
	height: 100%;
	.logo {
		width: 100%;
        height: 70px;
        color: #fff;
		z-index: 3;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
    	align-items: center;
    	padding-left: 20px;
	}
	.menu-view {
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		z-index: 2;
	}
}
</style>